<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>书签列表</title>
  <script src="./dist/jquery.min.js"></script>
  <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
  <link crossorigin="" rel="icon" type="image/x-icon" href="./favicon.ico">
  <script src="//unpkg.com/layui@2.7.6/dist/layui.js"></script>
  <script src="./dist/moment.min.js"></script>
  <script src="./dist/sakura.js"></script>
  <style>
    .hover {
      background: aquamarine;
    }

    body {
      background-attachment: fixed;
      background-image: url(./dist/headerbg.png);
      background-repeat: repeat-x;
      -webkit-background-size: 100% 100%;
      background-size: auto;
    }
  </style>
</head>

<body>
  <div id="tree"></div>
</body>
<script>

  var htmlStr = ``
  function successCallback(str) {
    let data = JSON.parse(decodeURIComponent(str))[0]
    let list = data.children[0].children

    layui.use('tree', function () {
      var tree = layui.tree;

      //渲染
      var inst1 = tree.render({
        elem: '#tree'  //绑定元素
        , data: list,
        click: function (obj) {
          obj.data.url && window.open(obj.data.url);
        }
      });
    });
  }
  function errorCallback(xhr, status) {
    console.log('出问题了！');
  }

  function completeCallback(xhr, status) {
    console.log('Ajax请求已结束。');
  }
  $.ajax({
    async: true,
    url: 'bookmarks/create',
    type: 'GET',
    data: {},
    timeout: 30000,
    success: successCallback,
    error: errorCallback,
    complete: completeCallback
  })
</script>

</html>